<template>
  <div class="ECard" v-if="mode == 'horizontal'">
    <div class="left">
      <el-card class="box-card">
        <div slot="header" class="header">
          <span style="font-size: 14px">{{ leftTitle }}</span>
          <!-- 有可能标题右侧有使用 -->
          <slot name="headerRight"></slot>
        </div>
        <slot name="left"></slot>
      </el-card>
    </div>
    <div class="right">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 14px">{{ rightTitle }}</span>
          <span style="font-size: 14px; margin-left: 2px" v-if="ilabel"
            >( <i class="ilabel">{{ ilabel }}</i> )</span
          >
        </div>
        <slot name="right"></slot>
      </el-card>
    </div>
  </div>
  <div class="verticalCard" v-else-if="mode == 'vertical'">
    <div class="top">
      <el-card class="box-card">
        <slot name="top"></slot>
      </el-card>
    </div>
    <div class="bottom">
      <el-card class="box-card">
        <slot name="bottom"></slot>
      </el-card>
    </div>
  </div>
  <div class="otherCard" v-else>
    <div class="top">
      <el-card class="box-card">
        <slot name="top"></slot>
      </el-card>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <div class="bottom">
      <el-card class="box-card">
        <slot name="bottom"></slot>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "ECard",
  props: {
    leftTitle: {
      type: String,
      default: "左侧标题",
    },
    rightTitle: {
      type: String,
      default: "右侧标题",
    },
    ilabel: {
      type: String,
    },
    mode: {
      type: String,
      default: "horizontal",
    },
  },
  computed: {},
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.ECard {
  display: flex;
  justify-content: space-around;

  .left {
    width: 28%;
    margin-right: 10px;
    // max-height: calc(100vh - 90px);
    max-height: calc(100vh - 124px);
    ::v-deep .el-card {
      height: 100%;
      .el-card__header {
        height: 66px;
        line-height: 34px;
      }
      .el-card__body {
        height: 100%;
      }
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .right {
    width: 70%;
    min-height: calc(100vh - 124px);
    ::v-deep .el-card {
      height: 100%;
      .el-card__header {
        height: 66px;
        line-height: 34px;
      }
      .el-card__body {
        height: calc(100vh - 192px);
      }
    }
    .ilabel {
      font-style: normal;
      color: red;
    }
  }
}
.verticalCard {
  .top {
    margin-bottom: 10px;
  }
  .bottom {
    .box-card {
      height: calc(100vh - 212px);
      position: relative;
    }
  }
}
.otherCard {
  .center {
    margin: 10px 0;
  }
  .bottom {
    .box-card {
      height: calc(100vh - 254px);
      position: relative;
    }
  }
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
